<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <title>护照申请表格</title>
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/build_standalone.less">
  <link rel="stylesheet" href="${ctx}/static/passport/css/reset.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/common.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/approvallist.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/approvallist_bootstrap.css">
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/jquery.min.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/bootstrap-datetimepicker.min.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/locales/bootstrap-datetimepicker.zh-CN.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/bootstrap.min.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/js/applicationprocess.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/js/jsGetAge.js'></script>
  
</head>

<body>
<div class='common_header_wrapper'>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="javascript:;">公益护照申请表</a>
      </div>
<%--      <div class='common_headeruserinfo_wrapper'>
                    <span class='avatar'>
                        <img src="img/timg.jpg">
                    </span>
        <label>申请人</label>--%>
      </div>
    </div>
  </nav>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="common_process_wrapper main applicant_form">
      <form class="form-horizontal form" name="myform" action="${ctx}/passportApply/next" method="post" role="form">
        <!--手机号-->
        <div class='form-group'>
          <label class="col-lg-2 col-md-3 col-sm-3 control-label">手机号<span>*</span></label>
          <div class="col-lg-8 col-md-6 col-sm-9">
            <input class='form-control' name="mobile" type="text" id="phone_number">
          </div>
          <button type="button" id="sendCode" class="btn btn-default col-lg-2 col-md-3 col-sm-5" onclick="javascriopt:sendCode();" >发送验证码</button>
        </div>
        <!--验证码-->
        <div class="form-group">
          <label class="col-lg-2 col-md-3 col-sm-3 control-label">验证码<span>*</span></label>
          <div class="col-lg-10 col-md-9 col-sm-9">
            <input type="text" class="form-control" id="phone_verification" name="code" onblur="javascriopt:checkCode();">
          </div>
        </div>
        <!--姓名-->
        <div class="form-group">
          <label class="col-lg-2  col-md-3 col-sm-3 control-label">姓名<span>*</span></label>
          <div class="col-lg-10 col-md-9 col-sm-9">
            <input type="text" class="form-control" id="user_name" name="name">
          </div>
        </div>
        <!--证件类型-->
        <div class="form-group">
          <label class="col-lg-2  col-md-3 col-sm-3 control-label">证件类型<span>*</span></label>
          <div class="col-lg-10 col-md-9 col-sm-9">
            <select class='form-control' id="ID_type" name="cardType">
              <option value="CID">身份证</option>
            </select>
          </div>
        </div>
        <!--证件编号-->
        <div class="form-group">
          <label class="col-lg-2  col-md-3 col-sm-3 control-label">证件编号<span>*</span></label>
          <div class="col-lg-10 col-md-9 col-sm-9">
            <input id="ID_number" type="text" class="form-control" name="cardNO">
          </div>
        </div>
        <!--出生日期-->
        <div class="form-group">
          <label class="col-lg-2  col-md-3 col-sm-3 control-label control_margin">出生日期<span>*</span></label>
          <div class="col-lg-3 col-md-9 col-sm-9 control_margin_bottom control_margin">
            <input id="birth_date" type="text" class="form-control" name="birthday">
          </div>
          <!--性别-->
          <label class="col-lg-2  col-md-3 col-sm-3 control-label ">性别<span>*</span></label>
          <div class="col-lg-5 col-md-9 col-sm-9 " id="applicant_sex">
            <div class="col-lg-3 col-md-5 col-sm-5">
              <label class="radio-inline">
                <input value="男" type="radio" class="applicant_sex" id="applicant_sex_man" name='sex' checked="checked">男
              </label>
            </div>
            <div class="col-lg-2 col-md-5 col-sm-5">
              <label class="radio-inline">
                <input value="女" type="radio" class="applicant_sex" id="applicant_sex_woman" name='sex'>女
              </label>
            </div>
          </div>
        </div>
        <!--申请类别-->
        <div class="form-group">
          <label class="col-lg-2 col-md-3 col-sm-3 control-label">申请类别<span>*</span></label>
          <div class="col-lg-10 col-md-9 col-sm-9">
            <select class='applicationtype_select form-control' name="applyType">
              <option value="10">首次申领</option>
              <option value="20" data="reissue">换发护照</option>
              <option value="30" data="reissue">补发护照</option>
            </select>
          </div>
        </div>
        <div class="reissueform_wrapper">
          <label class="col-lg-2 col-md-3 col-sm-3 control-label ">原因<span>*</span></label>
          <div class="col-lg-10 col-md-9 col-sm-9">
            <div class="col-lg-5 col-md-5">
              <label class="radio-inline">
                <input type="radio" name="applyCase" value="原护照丢失" checked="checked">原护照丢失
              </label>
            </div>
            <div class="col-lg-5 col-md-5">
              <label class="radio-inline">
                <input type="radio" name="applyCase" value="原护照被盗、损毁">原护照被盗、损毁
              </label>
            </div>

          </div>
          <br/><br/>
        </div>
        <!--紧急联系人-->
        <div class="emergency_contact">
          <div class="form-group">
            <label class="col-lg-2 col-md-3 col-sm-4 control-label">紧急联系人</label>
          </div>
          <!--<div class="form-group">-->
          <div class="form-group">
            <label class="col-lg-2 col-md-3 col-sm-3 control-label control_margin">姓名<span>*</span></label>
            <div class="col-lg-3 col-md-9 col-sm-9 control_margin control_margin_bottom">
              <input type="text" class="form-control" id="urgent_name" name="contactName">
            </div>
            <label class="col-lg-2 col-md-3 col-sm-3 control-label">电话<span>*</span></label>
            <div class="col-lg-4 col-md-9 col-sm-9">
              <input type="text" class="form-control" id="urgent_phone" name="contactPhone">
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 col-md-3 col-sm-3 control-label">住址<span>*</span></label>
            <div class="col-lg-9 col-md-9 col-sm-9">
              <input type="text" class="form-control" id="urgent_address" name="contactAddress">
            </div>
          </div>
        </div>
        <!--</div>-->
        <!--未成年人申请填写-->
        <div class="form-group juvenile">
          <label class="col-lg-3 control-label ">
            <!--<input class="minor_checkbox pull-left" id='juvenile' type="checkbox">-->
            <label class='pull-left' for=''>未成年人申请填写</label>
          </label>
        </div>
        <!--监护人信息-->
        <div class="guardianinformation_wrapper">
          <label class="radio-inline">
            <input class='guardiantype' type="radio" data="guardian" name='guardiantype' id="guardiantype">监护人信息
          </label>
          <div class='guardian_wrapper'>
            <div class="form-group">
              <label class="col-lg-2 col-md-3 col-sm-3 control-label control_margin">姓名<span>*</span></label>
              <div class="col-lg-4 col-md-9 col-sm-9 control_margin control_margin_bottom">
                <input type="text" class="form-control" disabled id="guardian_name" name="guardianName">
              </div>
              <label class="col-lg-2 col-md-3 col-sm-3 control-label">监护人关系<span>*</span></label>
              <div class="col-lg-3 col-md-9 col-sm-9">
                <select class='form-control' id="guardian_relation" name="guardianRelation" disabled>
                  <option value="1">父母</option>
                  <option value="2">祖父母</option>
                  <option value="3">外祖父母</option>
                  <option value="4">兄姐</option>
                  <option value="5">其他</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 col-md-3 col-sm-3 control-label">证件类型<span>*</span></label>
              <div class="col-lg-9 col-md-9 col-sm-9">
                <select class='form-control' id="ID_type1" disabled name="guardianCardType">
                  <option value="CID">身份证</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 col-md-3 col-sm-3 control-label">证件编号<span>*</span></label>
              <div class="col-lg-9 col-md-9 col-sm-9">
                <input id="ID_number1" type="text" class="form-control" disabled  name="guardianCardNo">
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 col-md-3 col-sm-3 control-label control_margin">电话<span>*</span></label>
              <div class="col-lg-4 col-md-9 col-sm-9 control_margin_bottom control_margin">
                <input type="text" class="form-control" disabled id="guardian_phone" name="guardianPhone">
              </div>
              <label class="col-lg-2 col-md-3 col-sm-3 control-label">性别<span>*</span></label>
              <div class="col-lg-3 col-md-9 col-sm-9" id="applicant_sex1">
                <div class="col-lg-4 col-md-5 col-sm-5">
                  <label class="radio-inline">
                    <input id="applicant_sex_man1" type="radio" name="guardianSex" disabled value="男" checked="check">男
                  </label>
                </div>
                <div class="col-lg-3 col-md-5 col-sm-5">
                  <label class="radio-inline">
                    <input id="applicant_sex_woman1" type="radio" name="guardianSex" value="女" disabled> 女
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <!--监护单位信息-->
              <label class="radio-inline">
                <input class='guardiantype' type="radio" data="monitoringinstitutions" name='guardiantype' id="unit_info">监护单位信息
              </label>
            </div>
          </div>
          <div class="monitoringinstitutions_wrapper">
            <div class="form-group">
              <label class="col-lg-2 col-md-3 col-sm-3 control-label">单位名称<span>*</span></label>
              <div class="col-lg-9 col-md-9 col-sm-9">
                <input type="text" class="form-control" disabled id="unit_name" name="guardianUnit">
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 col-md-3 col-sm-3 control-label">组织机构代码<span>*</span></label>
              <div class="col-lg-9 col-md-9 col-sm-9">
                <input id="unit_code" type="text" value="" class="form-control" name="guardianUnitCode" disabled>
              </div>
            </div>
          </div>
        </div>
        <!--提交-->
        <div class="form-group summitbtn">
          <div class="col-lg-offset-2 col-lg-9 col-md-10">
            <a href='javascript:void(0);' class="btn btn-primary btn-lg btn-block" id="summitbtn" onclick="javascript:doSumbit();">下一步</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  $("#sendCode").attr("disabled", "disabled");
  $(".juvenile").hide();
  function sendCode()
  {
    var mobile = $('#phone_number').val();
    var url = "${ctx}/passportApply/sendCode/"+mobile;
    $.getJSON(url,function(data){
      alert(data.message);
    });
  }
  function checkCode()
  {
    var mobile = $('#phone_number').val().trim();
    var code = $('#phone_verification').val();
    if(code == "")
    {
	      alert("请输入手机验证码");
        return;
    }
    var url = "${ctx}/passportApply/checkCode/"+mobile+"/"+code;
    $.getJSON(url,function(data){

     if(data.code > 0)
      {
        alert(data.message);
        $('#phone_verification').val('');
      }
  
	   });
  }
  function doSumbit()
  {
    document.myform.submit();
  }

  $(function() {
    var application = {
      choosePassportType: function() {
        $('.applicationtype_select').change(function() {
          if ($(this).find('option:selected').attr('data')) {
              $('.reissueform_wrapper').show();
              $('.guardianinformation_wrapper,.emergency_contact,.juvenile').hide();
              $(".guardiantype").attr("checked",false);
              $('.monitoringinstitutions_wrapper,.guardian_wrapper').find('input,select').each(function() {
                  $(this).attr('disabled', 'disabled');
              })
          } else {
            $('.reissueform_wrapper').hide();
              $('.emergency_contact').show();
              var age = jsGetAge($("#birth_date").val());
              if(age < 18 && $(".applicationtype_select").val()==10){
                  $('.juvenile,.guardianinformation_wrapper').show();
                  $('#guardiantype,#unit_info').removeAttr("disabled");
              }else{
                  $('.guardianinformation_wrapper').hide();
                  $(".guardiantype").attr("checked",false);
                  $('.monitoringinstitutions_wrapper,.guardian_wrapper').find('input,select').each(function() {
                      $(this).attr('disabled', 'disabled');
                  })
              }
          }
        });
//        $('.minor_checkbox').click(function() {
//          if ($(this).is(':checked')) {
//            $('.guardianinformation_wrapper').show();
//          } else {
//            $('.guardianinformation_wrapper').hide();
//          }
//        });
        $('.guardiantype').click(function() {
          var $this = $(this);
          if ($this.attr('data') == 'guardian') {
            $('.monitoringinstitutions_wrapper').find('input').each(function() {
              $(this).attr('disabled', 'disabled');
            })
            $('.guardian_wrapper').find('input').each(function() {
              $(this).removeAttr('disabled');
            })
            $('.guardian_wrapper').find('select').each(function() {
              $(this).removeAttr('disabled');
            })
          } else if ($this.attr('data') == 'monitoringinstitutions') {
            $('.guardian_wrapper').find('input').each(function() {
              $(this).attr('disabled', 'disabled');
            })
            $('.guardian_wrapper').find('select').each(function() {
              $(this).attr('disabled', 'disabled');
            })
            $('.monitoringinstitutions_wrapper').find('input').each(function() {
              $(this).removeAttr('disabled');
            })
          }
        });
        /*判断手机号是否为空*/
        $("#phone_number").change(function() {
          var phone_pattern = /^(1[3-9])\d{9}$/;
          var mobile = $("#phone_number").val().trim();
          if (!phone_pattern.test(mobile))
          {
              $("#phone_number").focus();
              $("#sendCode").attr("disabled", "disabled");
              alert("手机号填写错误");
              return false
          }else
          {
              $("#sendCode").removeAttr("disabled");
          }
          form_judgment();
        });
        /*出生日期*/
        $("#birth_date").change(function() {
          var birth = /^\d{8}$/;
          if (($("#birth_date").val().length !== 8) && !(birth.test($("#birth_date").val()))) {
            alert("出生日期的长度必须为8位数");
          }
          form_judgment();
        });
      },
      init: function() {
        this.choosePassportType();
      }
    }
    authentication();
    form_judgment();
    application.init();
  })
  // 性别验证
  function sexChecked(ID_number, sex_man, sex_woman) {
    var applicant_sex = "";
    var psidno = $(ID_number).val();
    var last;
    if(psidno.length==18)
    {
        last = psidno[psidno.length - 2];
    }
    else if(psidno.length==15)
    {
        last = psidno[psidno.length - 1];
    }

    if (last % 2 != 0) {
      // $(sex_man).attr("checked","checked");

      $(sex_man).click().attr("disabled");
      applicant_sex = "男";
    } else {
      // $(sex_woman).attr("checked","checked");
      $(sex_woman).click().attr("disabled");
      applicant_sex = "女";
    }
  }
  function authentication() {
    var pattern = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    if ($("#ID_type").val() == "CID") {
      $("#ID_number").change(function() {
        // 申请人性别
        sexChecked("#ID_number", "#applicant_sex_man", "#applicant_sex_woman");
        var IDNumber = $("#ID_number").val();
        var birth_date = "";

        if (pattern.test(IDNumber)) {
          if (IDNumber.length == 18) {
            birth_date = IDNumber.substring(6, 14);
          }
          else if(IDNumber.length == 15)
          {
              birth_date ="19"+IDNumber.substring(6, 12);
          }
          //填充生日
          $("#birth_date").val(birth_date);
          var age = jsGetAge(birth_date);
          if(age < 18  && $(".applicationtype_select").val()==10){
              $('.juvenile,.guardianinformation_wrapper').show();
              $('#guardiantype,#unit_info').removeAttr("disabled");
          }else{
              $('.juvenile,.guardianinformation_wrapper').hide();
              $(".guardiantype").attr("checked",false);
              $('.monitoringinstitutions_wrapper,.guardian_wrapper').find('input,select').each(function() {
                  $(this).attr('disabled', 'disabled');
              })
          }
        } else {
          alert("请填写正确的身份证号码");
        }
        form_judgment();
      });
    }

    // ----监护人证件编号----
    $("#ID_number1").change(function() {
      // 监护人性别
      sexChecked("#ID_number1", "#applicant_sex_man1", "#applicant_sex_woman1");
      var IDNumber = $("#ID_number1").val();
      var birth_date = "";
      if (pattern.test(IDNumber)) {
        if (IDNumber.length == 18) {
          birth_date = IDNumber.substring(6, 14);
        }
        // $("#birth_date").val(birth_date);
      } else {
        alert("请填写正确的身份证号码");
      }
      form_judgment();
    });
    // 组织机构代码
    $("#unit_code").change(function() {
      var reg = /^[a-zA-Z\d]{8}\-[a-zA-Z\d]$/;
      var str = $("#unit_code").val();
      if (!reg.test(str)) {
        alert("请填写正确的组织机构代码");

      } else {
      }
      form_judgment();
    });
  }



  // 对按钮进行禁用
  function form_judgment() {
    //对未成年人以上内容进行验证，如果为null设置下一步不可点
    if ($("#phone_number").val() == "" || $("#phone_verification").val() == "" || $("#user_name").val() == "" || $("#ID_number").val() == "" || $("#birth_date").val() == "" ) {
      // console.log('11111111111')
      $("#summitbtn").attr("disabled", "disabled");
    }
    //对未成年人申请内容进行验证，如果为null设置下一步不可点
  else{
      //移除按钮禁用
      $("#summitbtn").removeAttr("disabled");
    }
  }
  //为需要验证的输入项
  $("#phone_verification,#user_name").change(function(){
    form_judgment();
  });
</script>

</html>
